<template>
  <div class="all">
    <div class="demo-input-suffix">
      <ul>
        <li>
          <span class="attribute">文章标题（title）：</span>
          <el-input
            placeholder="不超过20字"
            v-model="list.enterpriseTitle"
            class="title_input"
            maxlength="20"
          >
          </el-input>
        </li>
        <li>
          <span class="attribute">作者 ：</span>
          <el-input v-model="list.enterpriseAuthor" class="title_input">
          </el-input>
        </li>
        <li>
          <span class="attribute">标签（keywords）：</span>
          <el-input v-model="list.enterpriseKeywords" class="title_input">
          </el-input>
        </li>
        <li class="li4">
          <span class="attribute">简介（description）：</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="list.enterpriseDescription"
          >
          </el-input>
        </li>
        <li>
          <div class="block">
            <span class="demonstration attribute">更新时间 ：</span>
            <el-date-picker
              class="title_input"
              v-model="list.enterpriseTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </li>
        <li>
          <span class="attribute">分支企业 ：</span>
          <el-select
            class="attribute_title_input"
            v-model="list.branchId"
            filterable
            placeholder="南湖厚朴"
          >
            <el-option
              v-for="item in options"
              :key="item.branchId"
              :label="item.companyName"
              :value="item.branchId"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="attribute">上传封面图 ：</span>
          <el-upload
            class="upload-demo"
            drag
            multiple
            action="http://ay8wdheq.dongtaiyuming.net/banner/upload"
            :http-request="upload1"
             :on-success="uploadSuccess"
             :auto-upload="true"
             :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              <p>点击或将文件拖拽到这里上传</p>
              <p>支持扩展名：.jpg .jpeg .gif .png</p>
            </div>
          </el-upload>
        </li>
        <li>
          <span class="attribute">正文内容 ：</span>
          <div class="el-main1">
            <quill-editor v-model="text"></quill-editor>
          </div>
        </li>
        <li>
          <div class="button button1" @click="cancel">取消</div>
          <div class="button button2" @click="UpdateEnterprise">保存</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["enterpriseId"],
  data() {
    return {
      text: "",
      list: {
        branchId:"",
        // 标题
        enterpriseTitle: "",
        // 作者
        enterpriseAuthor: "",
        // 标签
        enterpriseKeywords: "",
        // 简介
        enterpriseDescription: "",
        // 更新时间
        enterpriseTime: "2022-01-07",
        // 分支企业
        enterpriseName: "",
        // 封面图
        enterpriseUrl: "https://img0.baidu.com/it/u=2706358704,1110946732&fm=26&fmt=auto",
        // 正文内容
        enterpriseContent: "",
      },
      // 下拉框内容
      options: [],
    };
  },

  created() {
    this.getId()
  },
  methods: {
    // 取消
    cancel() {
      this.$message.info("编辑取消");
      this.$router.push({ path: "/branchdynamics" });
    },

    //需要上传的图片
    async upload1(img) {
      console.log(img)
      const file = new FormData()
      file.append('file', img.file)
      const res = await this.$http.getFile(file)
      return res
    }, 
    uploadSuccess (response, file, fileList) {
      this.list.enterpriseUrl = response
    },

    // 确定
    async getId() {
      //  根据 id 发送请求
      let {
        data:{branchCompanies,data:[data]}
      } = await this.$http.getSelectOnly({enterpriseId:this.enterpriseId});
      console.log(branchCompanies);
      console.log(data);
      this.options = branchCompanies;
      this.list = data;
      this.text = `<p>${data.enterpriseContent}</p>`
    },

    //修改完数据后进行数据编辑
    async UpdateEnterprise() {
      this.list.enterpriseContent = this.text.replace(/<[^>]+>/g, "");
      let res = await this.$http.getUpdateEnterprise(this.list);
      console.log(res);
      if (res != "selectAll") {
        return this.$message.info("编辑失败了");
      } else {
        this.$message.success("编辑成功");
        this.$router.push({ path: "/branchdynamics" });
      }
    },
  },
};
</script>

<style scoped lang="less">
.all {
  height: 1100px;
  overflow: visible;
}

li {
  list-style: none;
  width: 100%;
  float: right;
  display: flex;
}
.demo-input-suffix {
  width: 1300px;
  height: 1000px;
  font-size: 14px;
  display: flex;
  ul {
    li {
      margin-top: 24px;
      .attribute {
        display: inline-block;
        width: 200px;
        line-height: 32px;
        text-align: right;
      }
      .title_input {
        width: 400px;
        height: 32px;
        /deep/ .el-input__inner {
          height: 32px;
        }
      }
    }
    li:last-child {
      width: 100%;
      display: flex;
      justify-content: center;
      .button {
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        margin: 0 30px;
        cursor: pointer;
      }
      .button1 {
        width: 58px;
        height: 30px;
        border: 1px solid #999;
      }
      .button2 {
        width: 58px;
        height: 32px;
        color: #fff;
        background-color: rgba(24, 144, 255, 1);
      }
    }
  }
}
.el-textarea {
  width: 400px;
}
// 上传封面图
/deep/.el-upload-dragger {
  width: 400px;
  height: 190px;
  p {
    margin-top: 8px;
  }
  p:nth-child(1) {
    color: rgba(0, 0, 0, 0.7);
  }
  p:nth-child(2) {
    color: rgba(0, 0, 0, 0.4);
  }
}
/deep/.ql-container {
  width: 900px;
  height: 300px !important;
  padding: 0;
}
.el-main1 {
  width: 900px;
  padding: 0;
  /deep/.ql-toolbar {
    width: 900px;
  }
}
.attribute_title_input {
  /deep/.el-input__inner {
    width: 400px;
    height: 32px;
    line-height: 32px;
  }
}
/deep/.el-input__icon {
  line-height: 32px;
}
</style>